<template>
  <div id="app">
    <el-container>
      <el-header class="header">
        <div style="font-size: 50px;color: white;" class="el-icon-eleme"></div>
        <div class="elm"><p>😋饿了么后台管理</p></div>
        <div style="position: absolute;right: 145px;top: 15px">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </div>
        <el-button  class="btn" :loading="$store.state.load" type="primary" @click="$store.commit('CHANGE_FALSE')">退出登陆</el-button>
      </el-header>
      <el-container>
        <el-aside width="210px" class="aside">
          <el-menu
                  :router="true"
                  default-active="1"
                  class="el-menu-vertical-demo"
                  >
            <el-submenu index="1">
              <template slot="title">
                <span class="el-icon-s-check">管理员设置</span>
              </template>
              <el-menu-item index="/">
                <i class="el-icon-s-claim"></i>
                <span slot="title">管理员登陆日志</span>
              </el-menu-item>
              <el-menu-item index="/adminList">
                <i class="el-icon-s-custom"></i>
                <span slot="title">管理员列表</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
          <el-menu
                  :router="true"
                  default-active="3"
                  class="el-menu-vertical-demo"
                  >
            <el-submenu index="">
              <template slot="title">
                <span class="el-icon-school">店铺管理</span>
              </template>
              <el-menu-item index="/shopTypeList">
                <i class="el-icon-s-goods"></i>
                <span slot="title" >店铺类别列表</span>
              </el-menu-item>
              <el-menu-item index="/shopList">
                <i class="el-icon-goods"></i>
                <span slot="title">店铺列表</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
          <el-menu
                  :router="true"
                  default-active="5"
                  class="el-menu-vertical-demo"
                  >
            <el-submenu index="">
              <template slot="title">
                <span class="el-icon-cold-drink">商品管理</span>
              </template>
              <el-menu-item index="/goodsTypeList">
                <i class="el-icon-ice-cream"></i>
                <span slot="title">商品类别列表</span>
              </el-menu-item>
              <el-menu-item index="/goodsList">
                <i class="el-icon-refrigerator"></i>
                <span slot="title">商品列表</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>

        </el-aside>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script>
  export default {
    data(){
      return{
        isClick:true,
      }
    }
  }
</script>

<style lang="less" scoped>
  #app{height: 100%;overflow: hidden}
  .elm{width: 100px;height: 30px;white-space:nowrap;font-size: 20px;text-align: center}
  *{margin: 0;padding: 0}
  .header{background: #00dbde;display: flex;justify-content: space-between;align-items: center}
  .aside{height: 500px;
    }
  .main{height:100%;}
</style>
